<template>
	<div class="vue_app MyPoints" style="position: relative;width: 100%;height: 100%;padding-top: 11.4rem;">
		<div style="position: absolute;width: 100%;top: 0;">
			<my-header :title="'我的积分'" :hasTitle="true" :hasBack="true"></my-header>
			<span class="instructions" @click="jumpEventbuy">积分商城</span>
			<div class="integration_top" style="background: #38B035;">
				<p style="color:#ffffff;">可用积分</p>
				<h1>{{myPointsdata.remainingscore || 0}}</h1>
				<span class="instruc" @click="jumpEventPointsInstrut" v-if="recordata">{{recordata.typeName}}</span>
				<!--<p>最近三个月积分变动明细记录</p>-->
			</div>
			<tab-head :titleInfor="titleInfor" v-if="titleInfor">
			</tab-head>
		</div>
		<div style="width: 100%;height:100%;">
			<translate-main :lengths="3">
				<ul v-if="initData" class="aui-list aui-media-list detailed_list">
					<li class="aui-list-item" v-for="val in initData" :key="val">
						<div class="aui-list-item-inner">
							<span class="aui-list-item-title">{{val.scorecomment}}</span>
							<span class="aui-list-item-title">{{scoretimedata(val.scoretime)}}</span><!--val.scoretime-->
							<span class="points"><strong class="pointsok">{{val.scorecount < 0?"":"+"}}</strong>{{val.scorecount}}</span>
						</div>
					</li>
					<div class="no_data" v-if="initData.length==0 && flag" style="background-color: #f1f1f1;">
						<img src="static/image/no_data.png" style="width:70%;" />
						<p>暂无积分数据</p>
					</div>
				</ul>
			</translate-main>
		</div>
	</div>
</template>

<script>
	import MyHeader from "../header";
	import axios from "axios";
	import { mapGetters } from "vuex";
	import TabHead from '../../real-components/TabHeadOrder';
	import TranslateMain from '../../real-components/TranslateTest';
	import { showLoading, hideLoading } from "@/utils/loading";
	export default {
		data() {
			return {
				titleInfor: [{
					goodsClassId: "",
					goodsClassName: "全部"
				}, {
					goodsClassId: "",
					goodsClassName: "收入"
				}, {
					goodsClassId: "",
					goodsClassName: "支出"
				}],
				myPointsdata:[],
				recordata: {
					typeName:"",
					expCode:"",
				},
				flag:false
			}
		},
		components: {
			"my-header": MyHeader,
			"tab-head": TabHead,
			"translate-main": TranslateMain
		},
		methods: {
           queryMyPoints() {
           	    showLoading()
				var sessionId = localStorage.getItem('sessionId');
				let config = {
					url: window.api.customer_host + '/customer/getCustomer',
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
				};
				axios(config).then((res) => {
					hideLoading()
					this.flag = true
					this.myPointsdata = res.data.data[0]
				}).catch(err=>{
					hideLoading()
					Toast({
						duration: 2000,
						message:'请求接口失败',
						type: "fail"
					});
				})
			},
			scoretimedata(time){
				if(time){
				   return time.split('.')[0]
				}else{
					return ""
				}
			},
			//跳转积分商城
			jumpEventbuy(){
				this.$router.push({
					path: 'IntegralBuy'
				})
			},
			//跳转积分说明
			jumpEventPointsInstrut(){
				this.$router.push({
					path: 'giftCardInstrut?expCode=' + this.recordata.expCode
				})
			},
			//获取说明类型接口
			getInstrut() {
				var sessionId = localStorage.getItem('sessionId');
				var storeCode = localStorage.getItem('storeCode');
				let config = {
					url: window.api.base_host + '/expMana/queryExplain',
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
					params: {
						storeCode: storeCode,
						typeCode: 'EXP_INT',
						length:1,
					},
				};
				axios(config).then((res) => {
					this.recordata = res.data.data[0]
				})
			}
		},
		computed: {
			...mapGetters('wxh', [
				'userInfo'
			]),
			activeIndex() {
				return this.$store.state.cjy.classifyIndex
			},
			initData() {
				let arr1 = [];
				let arr2 = [];
				if(this.myPointsdata.scorelist) {
					for(let i = 0; i < this.myPointsdata.scorelist.length; i++) {
						if(this.myPointsdata.scorelist[i].scorecount < 0) {
							arr1.push(this.myPointsdata.scorelist[i]);
						} else {
							arr2.push(this.myPointsdata.scorelist[i]);
						}
					}
				}
				if(this.activeIndex == '0') {
					if(!this.myPointsdata.scorelist){
						return []
					}else{
						return this.myPointsdata.scorelist;
					}
				} else if(this.activeIndex == '2') {
					return arr1;
				} else if(this.activeIndex == '1') {
					return arr2;
				}

			}
		},
		created() {
            this.$store.dispatch('cjy/changeClassifyIndex', 0)
		},
		watch: {
			activeIndex(newdata, olddata) {
				
				/*console.log(this.activeIndex, "activeIndex")*/
			},
		},
		mounted() {
           this.queryMyPoints()
           this.getInstrut()
		},
	}
</script>

<style>
	.aui-list .aui-list-item {
		border-top: 1px solid #f1f1f1;
	}
	
	.aui-media-list .aui-list-item-inner {
		text-align: left;
	}
	
	.points {
		font-size: 1rem;
		position: absolute;
		top: 1rem;
		right: 1.5rem;
		display: inline-block;
	}
	
	.pointsok {
		margin-right: 0.5rem;
	}
	
	.aui-list .aui-list-item-title {
		display: inline-block;
		width: 70%;
		text-align: left;
	}
	.MyPoints .instructions {
		position: absolute;
		top: 1rem;
		right: 1rem;
	}
	.MyPoints .integration_top{
		position: relative;
	}
	.MyPoints .instruc{
		position: absolute;
		top: 4.5rem;
		right: 1rem;
	}
</style>